<script lang='ts' setup>
import { onMounted, reactive, ref } from 'vue';
import RoleList from './component/role-list.vue';
import RoleFormDialog from './component/role-form-dialog.vue';
const RoleListRef = ref();
const RoleIndexState = reactive({
    //获取PageTableExpose
    getListTableRef: () => RoleListRef.value.getListTableRef() as PageTableExpose,
    //加载表格
    loadTable: () => RoleIndexState.getListTableRef().loadTable(),
    //新增按钮点击操作
    onAddButtonClick: () => RoleIndexState.roleFormDialogVisible = true,
    //删除按钮点击操作
    onDeleteButtonClick: () => RoleListRef.value.deleteTableData(),

    ///// 表单弹窗 start //////
    roleFormDialogVisible: false,
    // 表单提交成功回调函数
    onSaveSuccess: () => {
        RoleIndexState.loadTable()
        RoleIndexState.roleFormDialogVisible = false
    },
    updateRoleFormDialogVisible: (val: any) => {
        RoleIndexState.roleFormDialogVisible = val
    }
    ///// 表单弹窗 end //////
})
onMounted(() => RoleIndexState.loadTable())
</script>
<template>
    <jxtech-basic-header>
        <template #extra>
            <jxtech-add-button @click="RoleIndexState.onAddButtonClick"></jxtech-add-button>
            <jxtech-delete-button @click="RoleIndexState.onDeleteButtonClick"></jxtech-delete-button>
        </template>
    </jxtech-basic-header>
    <role-list ref="RoleListRef"></role-list>
    <role-form-dialog
        ref="RoleFormDialogRef"
        :visible="RoleIndexState.roleFormDialogVisible"
        @save-success="RoleIndexState.onSaveSuccess"
        @update:visible="RoleIndexState.updateRoleFormDialogVisible"
    ></role-form-dialog>
</template>